<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<!-- jqGrid 核心js -->
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/ui.jqgrid.css" />

<script src="/slstone/js/jqgrid/js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery-ui-1.9.2.custom.js" type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js//i18n/grid.locale-cn.js" type="text/javascript"></script>
<script src="/slstone/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<!-- jqgrid 皮肤,需要在 jquery UI 官网 下载 -->
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/slstone/css/jqgrid/jquery-ui.css" />



<style type="text/css">

  .ui-jqgrid .ui-jqgrid-title
  {
  	font-size:12px;
  }
  
  .ui-jqgrid-sortable 
  {
  	font-size:12px;
  } 
  
  .ui-jqgrid tr.jqgrow td 
  {
   	font-size:11px; 
   	font-family:"바탕"
  }

</style>


<script type="text/javascript">    

//===============================================변수 선언구역 START===============================================//
window.lastcell = 0;


//===============================================변수 선언구역 END=================================================//


$(function()
{
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    $("#save").click(function(){});
    //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    
    //==================================================Function 정의구역 START==================================================//
	//"+"추가 버튼 클릭시 빈 그리드를 생성해준다
    var add = function()
    {  
    	var lastcount= jQuery("#writternEstimateList").getGridParam("reccount"); //获取当前列表的行数   	
    	var datarow = {};
        jQuery("#writternEstimateList").jqGrid("addRowData",lastcount+1,datarow); 
	}; 
	
	//삭제 아이콘을 클릭시 데이터 삭제
	var del = function()
	{  
		
		var data = jQuery("#writternEstimateList").jqGrid("getGridParam","selarrrow");
		
		var len = data.length;
		
		for (var i = len-1; i>=0; i--) 
		{
			jQuery("#writternEstimateList").jqGrid("delRowData",data[i]);
		}        		
		
	}; 
	
	//화면의 데이터를  DB에 저장한다
	var save = function()
	{
		var selectedId  = jQuery("#writternEstimateList").getGridParam("selrow"); //获取所选行号
     	
 		jQuery("#writternEstimateList").saveCell(selectedId,lastcell); //发送数据之前先保存所选行数据
 		
 		alert(lastcell);
                        	
    	var rowData = jQuery("#writternEstimateList").jqGrid("getRowData");  //获取所有数据  	
		var strUser = JSON.stringify(rowData);  //json데이터 전송 
    	
    	$.post("json/jqgrid.action", {rowData: strUser}, function callback(json)
    	{ 		 
    		//var userlist = $.parseJSON(json);  
    		//userList(userlist);   		 
    	});
	
	};
    //==================================================Function 정의구역 END==================================================//

	
	
	
    
    //견적서 그리드
    jQuery("#writternEstimateList").jqGrid(
    {
        colNames:
       	[
       	 "id",
       	 "석종",
       	 "마감",     	 
       	 "T",
       	 "W",
       	 "L",
       	 "단위",
       	 "No.",
       	 "석재비",
       	 "가공비",
       	 "해운비",
       	 "대판가격",
       	 "원석가격",
       	 "가공도",
       	 "지역",
       	 "단가(￥)",
       	 "항구",
       	 "단가($)",
       	 "등급",
       	 "비고"
       	],       	
      	colModel:
      	[
		  {name:"id",index:"id", width:60, sorttype:"int",editable: false,hidden:true,key:true},
          {name:"stoneBreed",index:"stoneBreed", width:150, sorttype:"date",editable: true},
          {name:"methods",index:"methods", width:65,align:"center", sorttype:"date",editable: true, edittype:"select",editoptions:{value:"null: ;polished:연마;flamed:버너;split:자연면;machine:절삭면;bushhammered:잔다듬; pineapple:정다듬 ;honed:혼드; sandblasted:분사; sanding:샌딩 ;antiq:앤틱;waterJet:워터젯; mushroom:혹두기"}},         
          {name:"thickness",index:"thickness", width:50, align:"center",editable: true,sorttype:"float",editrules:{number:true}},
          {name:"width",index:"width", width:50, align:"center",sorttype:"float",editable: true,editrules:{number:true}},
          {name:"length",index:"length", width:50, align:"center",sorttype:"float",editable: true,editrules:{number:true}},
          {name:"unit",index:"unit", width:40,align:"center",edittype:"select",editable: true,editoptions:{value:"null: ;me:M;sq:M2;cm:M3;pcs:EA"}},
          {name:"no",index:"no", width:50,align:"center",sorttype:"int",editable: true},
          {name:"stoneCosts",index:"stoneCosts", width:60,align:"center",sorttype:"float",editable: true, editrules:{number:true}}, 
          {name:"processingCosts",index:"processingCosts", width:60,align:"center",sorttype:"float",editable: true,editrules:{number:true}}, 
          {name:"shippingCosts",index:"shippingCosts", width:60,align:"center",sorttype:"float",editable: true,editrules:{number:true}}, 
          {name:"largeSizePrice",index:"largeSizePrice", width:60,align:"center",sorttype:"float",editable: true,editrules:{number:true}}, 
          {name:"genStonePrice",index:"genStonePrice", width:60,align:"center",sorttype:"float",editable: true,editrules:{number:true}},
          {name:"processingDrawing",index:"processingDrawing", align:"center",width:100, sortable:false,editable:true},     
          {name:"region",index:"region", align:"center",width:50, sortable:false,editable:true,edittype:"select",editoptions:{value:"null: ;xiamen:하문;laizhou:래주;chandi:수두"}},
          {name:"fobPrice",index:"fobPrice", align:"center",width:60, sortable:false,editable:true},
          {name:"seaport",index:"seaport", align:"center",width:60, sortable:false,editable:true,edittype:"select",editoptions:{value:"null: ; incheon:인천항;busan:부산항;pyeongtaek:평택항"}},
          {name:"cnfPrice",index:"cnfPrice", align:"center",width:60, sortable:false,editable:true,editrules:{number:true}},
          {name:"rank",index:"rank", align:"center",width:50, sortable:false,editable:true,edittype:"select",editoptions:{value:"null: ;rank1:상급;rank2:중급;rank3:하급;rankA:A급;rankB:B급;rankC:C급;rankD:D급"}},
          {name:"notes",index:"notes",width:150, sortable:false,editable:true}     
        ],
       
        
       //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>JqGrid属性区域 START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<//
       datatype: "local", //数据类型       
       viewrecords: true,
       //altRows:true, //隔行显示
       //altclass:"altclass", //隔行显示样式
       height: 500,  //表格高度
       multiselect : true,
       rownumbers:true, //显示行号
       pager:jQuery("#pager"), //导航键,表格最下面的栏
       cellEdit: true,             //表示表格可编辑                                
       cellsubmit:"clientArray",   //表示在本地进行修改
       rowList:[20,40,80],
       rowNum:20,
       caption: "견적서" , //标题
       //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>JqGrid属性区域 END<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<//
       
       //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>JqGrid Event区域 START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<//
       beforeEditCell:function(rowid,cellname,v,iRow,iCol) //触发编辑状态之前调用,主要是解决编辑状态下保存后有HTML值问题
       {
    		   lastrow = iRow;
    		   lastcell = iCol;
	   }
       //>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>JqGrid Event区域 START<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<//
   
    }).navGrid("#pager", //按鈕导航
	  {
    	edit:false,
    	add:true,
    	del:true,
    	search:false,
    	addfunc:add,
    	delfunc:del
      }).navButtonAdd("#pager",{caption:"",buttonicon:"ui-icon-disk",title:"保存数据",onClickButton:save});
    

  
    //컬럼 합병하기(사이즈)
   	 jQuery("#writternEstimateList").jqGrid("setGroupHeaders", 
   	 {
    	 useColSpanStyle: true, 
    	 groupHeaders:
    	 [
			{startColumnName: "thickness", numberOfColumns: 3, titleText: "사이즈"},
			{startColumnName: "seaport", numberOfColumns: 2, titleText: "CNF"},
			{startColumnName: "region", numberOfColumns: 2, titleText: "FOB"}
    	 ]	
     });

    //定义数组对象,给列表显示数据
     var mydata = 
   [
   		{stoneBreed:"대리석",thickness:"200",size:"400*500",stoneCosts:"900",processingCosts:"100",shippingCosts:"150",largeSizePrice:"50",processingDrawing:"TEST"},

   		
   		
   ]; 
    
    
    
    //把数据数据添加到grid
    for(var i=0;i<=mydata.length;i++)
        jQuery("#writternEstimateList").jqGrid("addRowData",i+1,mydata[i]);
});




	    

</script>

<title>견적서</title>
</head>
<body>
<body>
	<input type="button" id="del" name="del" value="删除" />
	<input type="button" id="add" name="add" value="添加" />
	<input type="button" id="save" name="save" value="保存" />
	<table id="writternEstimateList" class="scroll"></table>
	<div id="pager" class="scroll"></div>
</body>
</body>
</html>